<template>
  <div class="task-allocation-container">
    <!-- 页面头部 -->
    <div class="allocation-header">
      <div class="header-content">
        <div class="ancient-title">任务分配系统</div>
        <div class="header-subtitle">阴曹地府 · 跨部门任务智能分配</div>
      </div>
      <div class="header-decoration">
        <div class="decoration-line"></div>
        <div class="decoration-symbol">📋</div>
        <div class="decoration-line"></div>
      </div>
    </div>

    <!-- 路由信息 -->
    <div class="route-info">
      <a-breadcrumb>
        <a-breadcrumb-item>
          <router-link to="/dashboard"><HomeOutlined />工作台</router-link>
        </a-breadcrumb-item>
        <a-breadcrumb-item>
          <router-link to="/management"><ApartmentOutlined />机构管理</router-link>
        </a-breadcrumb-item>
        <a-breadcrumb-item>
          <router-link to="/management/department-cooperation"><TeamOutlined />部门协作管理</router-link>
        </a-breadcrumb-item>
        <a-breadcrumb-item> <InboxOutlined />{{ $route.meta.title }} </a-breadcrumb-item>
      </a-breadcrumb>
    </div>

    <!-- 任务分配统计 -->
    <div class="stats-section">
      <a-row :gutter="[20, 20]" class="stats-grid">
        <a-col :xs="24" :sm="12" :xl="6">
          <div class="stat-card primary-stat">
            <div class="stat-icon"><InboxOutlined /></div>
            <div class="stat-content">
              <div class="stat-title">活跃任务</div>
              <div class="stat-value">{{ allocationStats.activeTasks }}</div>
              <div class="stat-label">进行中</div>
            </div>
          </div>
        </a-col>
        <a-col :xs="24" :sm="12" :xl="6">
          <div class="stat-card judgment-stat">
            <div class="stat-icon"><CheckCircleOutlined /></div>
            <div class="stat-content">
              <div class="stat-title">完成率</div>
              <div class="stat-value">{{ allocationStats.completionRate }}%</div>
              <div class="stat-label">本月</div>
            </div>
          </div>
        </a-col>
        <a-col :xs="24" :sm="12" :xl="6">
          <div class="stat-card pending-stat">
            <div class="stat-icon"><ClockCircleOutlined /></div>
            <div class="stat-content">
              <div class="stat-title">待分配</div>
              <div class="stat-value">{{ allocationStats.pendingTasks }}</div>
              <div class="stat-label">任务</div>
            </div>
          </div>
        </a-col>
        <a-col :xs="24" :sm="12" :xl="6">
          <div class="stat-card online-stat">
            <div class="stat-icon"><ThunderboltOutlined /></div>
            <div class="stat-content">
              <div class="stat-title">分配效率</div>
              <div class="stat-value">{{ allocationStats.allocationEfficiency }}%</div>
              <div class="stat-label">智能分配</div>
            </div>
          </div>
        </a-col>
      </a-row>
    </div>

    <a-row :gutter="24">
      <!-- 左侧：任务列表 -->
      <a-col :xs="24" :lg="16">
        <a-card title="任务分配管理" :bordered="false">
          <template #extra>
            <a-space>
              <a-button type="primary" @click="showCreateTaskModal"> <PlusOutlined />创建任务 </a-button>
              <a-button @click="autoAllocate"> <ThunderboltOutlined />智能分配 </a-button>
              <a-button @click="exportTasks"> <ExportOutlined />导出 </a-button>
            </a-space>
          </template>

          <!-- 筛选区域 -->
          <div class="filter-section">
            <a-row :gutter="16">
              <a-col :span="6">
                <a-select v-model:value="filterStatus" placeholder="任务状态" style="width: 100%" allow-clear>
                  <a-select-option value="">全部状态</a-select-option>
                  <a-select-option value="pending">待分配</a-select-option>
                  <a-select-option value="assigned">已分配</a-select-option>
                  <a-select-option value="processing">执行中</a-select-option>
                  <a-select-option value="completed">已完成</a-select-option>
                </a-select>
              </a-col>
              <a-col :span="6">
                <a-select v-model:value="filterPriority" placeholder="优先级" style="width: 100%" allow-clear>
                  <a-select-option value="">全部优先级</a-select-option>
                  <a-select-option value="urgent">紧急</a-select-option>
                  <a-select-option value="high">高</a-select-option>
                  <a-select-option value="medium">中</a-select-option>
                  <a-select-option value="low">低</a-select-option>
                </a-select>
              </a-col>
              <a-col :span="6">
                <a-select v-model:value="filterDepartment" placeholder="负责部门" style="width: 100%" allow-clear>
                  <a-select-option value="">全部部门</a-select-option>
                  <a-select-option v-for="dept in allDepartments" :key="dept.id" :value="dept.id">
                    {{ dept.name }}
                  </a-select-option>
                </a-select>
              </a-col>
              <a-col :span="6">
                <a-input-search v-model:value="searchText" placeholder="搜索任务" @search="handleSearch" />
              </a-col>
            </a-row>
          </div>

          <!-- 任务列表 -->
          <div class="tasks-list">
            <div v-for="task in filteredTasks" :key="task.id" class="task-item">
              <div class="task-header">
                <div class="task-info">
                  <h4 class="task-title">{{ task.title }}</h4>
                  <div class="task-tags">
                    <a-tag :color="getStatusColor(task.status)">{{ getStatusText(task.status) }}</a-tag>
                    <a-tag :color="getPriorityColor(task.priority)">{{ getPriorityText(task.priority) }}</a-tag>
                    <a-tag color="cyan">{{ task.type }}</a-tag>
                  </div>
                </div>
                <div class="task-actions">
                  <a-dropdown>
                    <a-button type="text"><MoreOutlined /></a-button>
                    <template #overlay>
                      <a-menu>
                        <a-menu-item @click="viewTaskDetail(task)"> <EyeOutlined />查看详情 </a-menu-item>
                        <a-menu-item @click="assignTask(task)" v-if="task.status === 'pending'"> <UserAddOutlined />分配任务 </a-menu-item>
                        <a-menu-item @click="updateProgress(task)" v-if="task.status === 'processing'"> <EditOutlined />更新进度 </a-menu-item>
                        <a-menu-divider />
                        <a-menu-item @click="completeTask(task)" v-if="task.status === 'processing'"> <CheckOutlined />完成任务 </a-menu-item>
                      </a-menu>
                    </template>
                  </a-dropdown>
                </div>
              </div>

              <div class="task-content">
                <div class="task-description">{{ task.description }}</div>
                <div class="task-details">
                  <div class="task-departments">
                    <span class="label">协作部门：</span>
                    <a-tag v-for="deptId in task.departments" :key="deptId" size="small" color="blue">
                      {{ getDepartmentName(deptId) }}
                    </a-tag>
                  </div>
                  <div class="task-assignee" v-if="task.assignedTo"><span class="label">负责人：</span>{{ task.assignedTo }}</div>
                </div>
              </div>

              <div class="task-progress" v-if="task.status !== 'pending'">
                <div class="progress-info">
                  <span class="progress-label">任务进度</span>
                  <span class="progress-percentage">{{ task.progress }}%</span>
                </div>
                <a-progress :percent="task.progress" size="small" :show-info="false" />
              </div>

              <div class="task-meta">
                <div class="task-dates"><span class="label">创建：</span>{{ task.createTime }} <span class="label" style="margin-left: 16px">截止：</span>{{ task.deadline }}</div>
                <div class="task-workload"><span class="label">预计工作量：</span>{{ task.estimatedHours }}小时</div>
              </div>
            </div>
          </div>
        </a-card>
      </a-col>

      <!-- 右侧：分配工具 -->
      <a-col :xs="24" :lg="8">
        <a-space direction="vertical" size="large" style="width: 100%">
          <!-- 智能分配建议 -->
          <a-card title="智能分配建议" size="small" :bordered="false">
            <div class="allocation-suggestions">
              <div v-for="suggestion in allocationSuggestions" :key="suggestion.id" class="suggestion-item">
                <div class="suggestion-info">
                  <div class="suggestion-task">{{ suggestion.taskTitle }}</div>
                  <div class="suggestion-recommendation">
                    建议分配给：<strong>{{ getDepartmentName(suggestion.recommendedDept) }}</strong>
                  </div>
                  <div class="suggestion-reason">{{ suggestion.reason }}</div>
                </div>
                <div class="suggestion-actions">
                  <a-button type="link" size="small" @click="acceptSuggestion(suggestion)"> 采纳 </a-button>
                </div>
              </div>
            </div>
          </a-card>

          <!-- 部门工作负载 -->
          <a-card title="部门工作负载" size="small" :bordered="false">
            <div class="workload-chart">
              <div v-for="workload in departmentWorkloads" :key="workload.deptId" class="workload-item">
                <div class="workload-info">
                  <span class="dept-name">{{ getDepartmentName(workload.deptId) }}</span>
                  <span class="workload-percentage">{{ workload.loadPercentage }}%</span>
                </div>
                <div class="workload-bar">
                  <div class="workload-progress" :class="getWorkloadLevel(workload.loadPercentage)" :style="{ width: workload.loadPercentage + '%' }"></div>
                </div>
                <div class="workload-tasks">{{ workload.activeTasks }}个任务</div>
              </div>
            </div>
          </a-card>

          <!-- 任务类型分布 -->
          <a-card title="任务类型分布" size="small" :bordered="false">
            <div class="task-type-chart">
              <div v-for="typeData in taskTypeDistribution" :key="typeData.type" class="type-item">
                <div class="type-info">
                  <span class="type-name">{{ typeData.name }}</span>
                  <span class="type-count">{{ typeData.count }}个</span>
                </div>
                <div class="type-progress">
                  <div class="progress-bar" :style="{ width: typeData.percentage + '%' }"></div>
                </div>
              </div>
            </div>
          </a-card>

          <!-- 快速操作 -->
          <a-card title="快速操作" size="small" :bordered="false">
            <div class="quick-actions">
              <a-button block @click="batchAssign" style="margin-bottom: 8px"> <TeamOutlined />批量分配 </a-button>
              <a-button block @click="balanceWorkload" style="margin-bottom: 8px"> <SwapOutlined />负载均衡 </a-button>
              <a-button block @click="urgentTaskHandler"> <AlertOutlined />紧急任务处理 </a-button>
            </div>
          </a-card>
        </a-space>
      </a-col>
    </a-row>

    <!-- 创建任务弹窗 -->
    <a-modal v-model:open="createTaskModalVisible" title="创建任务" @ok="handleCreateTask" @cancel="handleCreateTaskCancel" width="700px">
      <a-form ref="taskFormRef" :model="taskForm" :rules="taskRules" layout="vertical">
        <a-row :gutter="16">
          <a-col :span="12">
            <a-form-item label="任务标题" name="title">
              <a-input v-model:value="taskForm.title" placeholder="请输入任务标题" />
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item label="任务类型" name="type">
              <a-select v-model:value="taskForm.type" placeholder="选择任务类型">
                <a-select-option value="审判协作">审判协作</a-select-option>
                <a-select-option value="流程优化">流程优化</a-select-option>
                <a-select-option value="资源调配">资源调配</a-select-option>
                <a-select-option value="紧急事务">紧急事务</a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
        </a-row>

        <a-form-item label="任务描述" name="description">
          <a-textarea v-model:value="taskForm.description" placeholder="详细描述任务内容和要求" :rows="3" />
        </a-form-item>

        <a-row :gutter="16">
          <a-col :span="8">
            <a-form-item label="优先级" name="priority">
              <a-select v-model:value="taskForm.priority" placeholder="选择优先级">
                <a-select-option value="urgent">紧急</a-select-option>
                <a-select-option value="high">高</a-select-option>
                <a-select-option value="medium">中</a-select-option>
                <a-select-option value="low">低</a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
          <a-col :span="8">
            <a-form-item label="截止时间" name="deadline">
              <a-date-picker v-model:value="taskForm.deadline" style="width: 100%" />
            </a-form-item>
          </a-col>
          <a-col :span="8">
            <a-form-item label="预计工时" name="estimatedHours">
              <a-input-number v-model:value="taskForm.estimatedHours" :min="1" placeholder="小时" style="width: 100%" />
            </a-form-item>
          </a-col>
        </a-row>

        <a-form-item label="协作部门" name="departments">
          <a-checkbox-group v-model:value="taskForm.departments">
            <a-row>
              <a-col :span="8" v-for="dept in allDepartments" :key="dept.id">
                <a-checkbox :value="dept.id">{{ dept.name }}</a-checkbox>
              </a-col>
            </a-row>
          </a-checkbox-group>
        </a-form-item>

        <a-form-item label="创建者" name="creator">
          <a-input v-model:value="taskForm.creator" placeholder="任务创建者" />
        </a-form-item>
      </a-form>
    </a-modal>
  </div>
</template>

<script setup>
import { ref, reactive, computed, onMounted } from 'vue'
import { message } from 'ant-design-vue'
import {
  HomeOutlined,
  ApartmentOutlined,
  TeamOutlined,
  InboxOutlined,
  CheckCircleOutlined,
  ClockCircleOutlined,
  ThunderboltOutlined,
  PlusOutlined,
  ExportOutlined,
  MoreOutlined,
  EyeOutlined,
  UserAddOutlined,
  EditOutlined,
  CheckOutlined,
  SwapOutlined,
  AlertOutlined
} from '@ant-design/icons-vue'

// 响应式数据
const searchText = ref('')
const filterStatus = ref('')
const filterPriority = ref('')
const filterDepartment = ref('')
const createTaskModalVisible = ref(false)
const taskFormRef = ref()

// 任务分配统计
const allocationStats = reactive({
  activeTasks: 128,
  completionRate: 88,
  pendingTasks: 23,
  allocationEfficiency: 92
})

// 部门数据
const allDepartments = ref([
  { id: 1, name: '第一殿秦广王府' },
  { id: 2, name: '第二殿楚江王府' },
  { id: 3, name: '第三殿宋帝王府' },
  { id: 5, name: '第五殿阎罗王府' },
  { id: 10, name: '第十殿转轮王府' }
])

// 任务数据
const tasks = ref([
  {
    id: 1,
    title: '跨殿业务流程优化',
    description: '优化第一殿与第十殿之间的轮回转世业务流程，提升处理效率',
    type: '流程优化',
    priority: 'high',
    status: 'processing',
    progress: 65,
    departments: [1, 10],
    assignedTo: '阎罗王',
    creator: '玉皇大帝',
    createTime: '2023-11-01',
    deadline: '2023-11-30',
    estimatedHours: 40
  },
  {
    id: 2,
    title: '紧急案件联合审理',
    description: '处理一起涉及多个业务领域的重大案件，需要多部门协作',
    type: '紧急事务',
    priority: 'urgent',
    status: 'assigned',
    progress: 25,
    departments: [1, 2, 5],
    assignedTo: '秦广王',
    creator: '太上老君',
    createTime: '2023-11-15',
    deadline: '2023-11-20',
    estimatedHours: 60
  },
  {
    id: 3,
    title: '新入职仙官培训协调',
    description: '协调各殿为新入职仙官提供轮岗培训',
    type: '资源调配',
    priority: 'medium',
    status: 'pending',
    progress: 0,
    departments: [1, 2, 3, 5],
    assignedTo: null,
    creator: '人事司',
    createTime: '2023-11-18',
    deadline: '2023-12-15',
    estimatedHours: 80
  }
])

// 智能分配建议
const allocationSuggestions = ref([
  {
    id: 1,
    taskTitle: '新入职仙官培训协调',
    recommendedDept: 5,
    reason: '第五殿阎罗王府在培训协调方面经验丰富，当前工作负载适中'
  },
  {
    id: 2,
    taskTitle: '业务流程标准化',
    recommendedDept: 1,
    reason: '第一殿在流程管理方面有优势，可以统筹协调其他部门'
  }
])

// 部门工作负载
const departmentWorkloads = ref([
  { deptId: 1, loadPercentage: 85, activeTasks: 12 },
  { deptId: 2, loadPercentage: 72, activeTasks: 9 },
  { deptId: 3, loadPercentage: 68, activeTasks: 8 },
  { deptId: 5, loadPercentage: 78, activeTasks: 11 },
  { deptId: 10, loadPercentage: 92, activeTasks: 15 }
])

// 任务类型分布
const taskTypeDistribution = ref([
  { type: 'cooperation', name: '审判协作', count: 45, percentage: 90 },
  { type: 'optimization', name: '流程优化', count: 32, percentage: 64 },
  { type: 'allocation', name: '资源调配', count: 28, percentage: 56 },
  { type: 'emergency', name: '紧急事务', count: 23, percentage: 46 }
])

// 任务表单
const taskForm = reactive({
  title: '',
  type: '',
  description: '',
  priority: 'medium',
  deadline: null,
  estimatedHours: null,
  departments: [],
  creator: ''
})

// 表单验证规则
const taskRules = {
  title: [{ required: true, message: '请输入任务标题', trigger: 'blur' }],
  type: [{ required: true, message: '请选择任务类型', trigger: 'change' }],
  description: [{ required: true, message: '请输入任务描述', trigger: 'blur' }],
  deadline: [{ required: true, message: '请选择截止时间', trigger: 'change' }],
  estimatedHours: [{ required: true, message: '请输入预计工时', trigger: 'blur' }],
  departments: [{ required: true, message: '请选择协作部门', trigger: 'change' }],
  creator: [{ required: true, message: '请输入创建者', trigger: 'blur' }]
}

// 计算属性
const filteredTasks = computed(() => {
  let result = tasks.value

  if (filterStatus.value) {
    result = result.filter((task) => task.status === filterStatus.value)
  }

  if (filterPriority.value) {
    result = result.filter((task) => task.priority === filterPriority.value)
  }

  if (filterDepartment.value) {
    result = result.filter((task) => task.departments.includes(filterDepartment.value))
  }

  if (searchText.value) {
    result = result.filter((task) => task.title.toLowerCase().includes(searchText.value.toLowerCase()))
  }

  return result
})

// 方法
const getStatusColor = (status) => {
  const colors = { pending: 'orange', assigned: 'blue', processing: 'cyan', completed: 'green' }
  return colors[status] || 'default'
}

const getStatusText = (status) => {
  const texts = { pending: '待分配', assigned: '已分配', processing: '执行中', completed: '已完成' }
  return texts[status] || status
}

const getPriorityColor = (priority) => {
  const colors = { urgent: 'red', high: 'orange', medium: 'blue', low: 'green' }
  return colors[priority] || 'default'
}

const getPriorityText = (priority) => {
  const texts = { urgent: '紧急', high: '高', medium: '中', low: '低' }
  return texts[priority] || priority
}

const getDepartmentName = (deptId) => {
  const dept = allDepartments.value.find((d) => d.id === deptId)
  return dept ? dept.name : `第${deptId}殿`
}

const getWorkloadLevel = (percentage) => {
  if (percentage >= 90) return 'high-load'
  if (percentage >= 70) return 'medium-load'
  return 'low-load'
}

const showCreateTaskModal = () => {
  Object.assign(taskForm, {
    title: '',
    type: '',
    description: '',
    priority: 'medium',
    deadline: null,
    estimatedHours: null,
    departments: [],
    creator: ''
  })
  createTaskModalVisible.value = true
}

const handleCreateTask = async () => {
  try {
    await taskFormRef.value.validate()
    const newTask = {
      id: Date.now(),
      ...taskForm,
      status: 'pending',
      progress: 0,
      assignedTo: null,
      createTime: new Date().toISOString().split('T')[0]
    }
    tasks.value.push(newTask)
    message.success('任务创建成功')
    createTaskModalVisible.value = false
  } catch (error) {
    console.error('表单验证失败:', error)
  }
}

const handleCreateTaskCancel = () => {
  createTaskModalVisible.value = false
}

const viewTaskDetail = (task) => {
  message.info(`查看任务详情: ${task.title}`)
}

const assignTask = (task) => {
  message.info(`分配任务: ${task.title}`)
}

const updateProgress = (task) => {
  message.info(`更新进度: ${task.title}`)
}

const completeTask = (task) => {
  task.status = 'completed'
  task.progress = 100
  message.success('任务已完成')
}

const autoAllocate = () => {
  message.info('启动智能分配算法...')
}

const acceptSuggestion = (suggestion) => {
  message.success(`已采纳分配建议: ${suggestion.taskTitle}`)
}

const batchAssign = () => {
  message.info('批量分配功能开发中...')
}

const balanceWorkload = () => {
  message.info('负载均衡功能开发中...')
}

const urgentTaskHandler = () => {
  message.info('紧急任务处理程序启动')
}

const handleSearch = () => {
  // 搜索逻辑已在计算属性中处理
}

const exportTasks = () => {
  message.info('任务数据导出功能开发中...')
}

onMounted(() => {
  // 页面加载时的初始化逻辑
})
</script>

<style lang="scss" scoped>
.task-allocation-container {
  padding: 24px;

  .allocation-header {
    text-align: center;
    margin-bottom: 32px;

    .header-content {
      .ancient-title {
        font-size: 32px;
        font-weight: bold;
        color: $secondary-color;
        margin-bottom: 8px;
        text-shadow: 0 0 20px rgba(212, 153, 10, 0.3);
      }

      .header-subtitle {
        font-size: 16px;
        color: $text-secondary;
        letter-spacing: 2px;
      }
    }

    .header-decoration {
      display: flex;
      align-items: center;
      justify-content: center;
      margin-top: 24px;
      gap: 16px;

      .decoration-line {
        width: 80px;
        height: 1px;
        background: linear-gradient(90deg, transparent, $secondary-color, transparent);
      }

      .decoration-symbol {
        font-size: 20px;
        color: $secondary-color;
        font-weight: bold;
      }
    }
  }

  .route-info {
    margin-bottom: 24px;
    padding: 12px 16px;
    border-radius: 8px;
    backdrop-filter: blur(10px);
    border: 1px solid rgba(212, 153, 10, 0.2);
  }

  .stats-section {
    margin-bottom: 32px;

    .stat-card {
      border-radius: 12px;
      padding: 24px;
      box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
      border: 1px solid rgba(212, 153, 10, 0.2);
      transition: all 0.3s ease;
      display: flex;
      align-items: center;
      gap: 16px;

      .stat-icon {
        width: 56px;
        height: 56px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 24px;
        color: white;
      }

      .stat-content {
        flex: 1;

        .stat-title {
          font-size: 14px;
          color: $text-secondary;
          margin-bottom: 4px;
        }

        .stat-value {
          font-size: 28px;
          font-weight: bold;
          color: $primary-color;
          margin-bottom: 4px;
        }

        .stat-label {
          font-size: 12px;
          color: $text-secondary;
        }
      }

      &.primary-stat .stat-icon {
        background: linear-gradient(135deg, #1890ff, #40a9ff);
      }

      &.judgment-stat .stat-icon {
        background: linear-gradient(135deg, #52c41a, #73d13d);
      }

      &.pending-stat .stat-icon {
        background: linear-gradient(135deg, #fa8c16, #ffa940);
      }

      &.online-stat .stat-icon {
        background: linear-gradient(135deg, #722ed1, #9254de);
      }
    }
  }

  .filter-section {
    margin-bottom: 20px;
    padding: 16px;
    border-radius: 8px;
    border: 1px solid rgba(212, 153, 10, 0.2);
  }

  .tasks-list {
    .task-item {
      margin-bottom: 16px;
      padding: 20px;
      border: 1px solid rgba(212, 153, 10, 0.2);
      border-radius: 8px;
      transition: all 0.3s ease;

      &:hover {
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
      }

      .task-header {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        margin-bottom: 16px;

        .task-info {
          flex: 1;

          .task-title {
            margin: 0 0 8px 0;
            color: $primary-color;
            font-size: 18px;
            font-weight: bold;
          }

          .task-tags {
            .ant-tag {
              margin-right: 8px;
            }
          }
        }
      }

      .task-content {
        margin-bottom: 16px;

        .task-description {
          color: $text-primary;
          line-height: 1.6;
          margin-bottom: 12px;
        }

        .task-details {
          .task-departments,
          .task-assignee {
            margin-bottom: 8px;

            .label {
              color: $text-secondary;
              margin-right: 8px;
            }

            .ant-tag {
              margin-right: 4px;
            }
          }
        }
      }

      .task-progress {
        margin-bottom: 16px;

        .progress-info {
          display: flex;
          justify-content: space-between;
          margin-bottom: 8px;

          .progress-label {
            color: $text-secondary;
            font-size: 14px;
          }

          .progress-percentage {
            color: $secondary-color;
            font-weight: bold;
            font-size: 14px;
          }
        }
      }

      .task-meta {
        display: flex;
        justify-content: space-between;
        align-items: center;
        color: $text-secondary;
        font-size: 14px;

        .label {
          color: $text-secondary;
          margin-right: 4px;
        }
      }
    }
  }

  .allocation-suggestions {
    .suggestion-item {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 12px 0;
      border-bottom: 1px solid rgba(212, 153, 10, 0.1);

      &:last-child {
        border-bottom: none;
      }

      .suggestion-info {
        flex: 1;

        .suggestion-task {
          font-size: 14px;
          font-weight: bold;
          color: $primary-color;
          margin-bottom: 4px;
        }

        .suggestion-recommendation {
          font-size: 13px;
          color: $text-primary;
          margin-bottom: 4px;
        }

        .suggestion-reason {
          font-size: 12px;
          color: $text-secondary;
        }
      }
    }
  }

  .workload-chart {
    .workload-item {
      margin-bottom: 16px;

      .workload-info {
        display: flex;
        justify-content: space-between;
        margin-bottom: 4px;
        font-size: 14px;

        .dept-name {
          color: $text-primary;
        }

        .workload-percentage {
          color: $secondary-color;
          font-weight: bold;
        }
      }

      .workload-bar {
        height: 8px;
        background: #f0f0f0;
        border-radius: 4px;
        overflow: hidden;
        margin-bottom: 4px;

        .workload-progress {
          height: 100%;
          transition: width 0.3s ease;

          &.low-load {
            background: #52c41a;
          }
          &.medium-load {
            background: #fa8c16;
          }
          &.high-load {
            background: #ff4d4f;
          }
        }
      }

      .workload-tasks {
        font-size: 12px;
        color: $text-secondary;
      }
    }
  }

  .task-type-chart {
    .type-item {
      margin-bottom: 12px;

      .type-info {
        display: flex;
        justify-content: space-between;
        margin-bottom: 4px;
        font-size: 14px;

        .type-name {
          color: $text-primary;
        }

        .type-count {
          color: $text-secondary;
        }
      }

      .type-progress {
        height: 6px;
        background: #f0f0f0;
        border-radius: 3px;
        overflow: hidden;

        .progress-bar {
          height: 100%;
          background: linear-gradient(90deg, $secondary-color, #f0c674);
          transition: width 0.3s ease;
        }
      }
    }
  }

  .quick-actions {
    .ant-btn {
      display: flex;
      align-items: center;
      justify-content: flex-start;
      gap: 8px;
    }
  }

  :deep(.ant-card) {
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    border: 1px solid rgba(212, 153, 10, 0.2);
    border-radius: 12px;
  }

  :deep(.ant-card-head) {
    border-bottom: 1px solid rgba(212, 153, 10, 0.2);
  }
}
</style>
